<template>
  <div style="margin: 15px" class="pay">
    <el-card class="Dbox">
      <div slot="header" style="margin: 0px">
        <span
          style="
            margin: 0px;
            display: flex;
            align-items: center;
            font-size: 18px;
          "
        >
          <img
            src="@/assets/img/txjl.png"
            style="width: 20px; margin-right: 5px"
          />
          奖励信息</span
        >
      </div>
      <div class="xhxBox" style="margin-top: -5px"></div>
      <!-- 查询表单 -->
      <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
        <el-form :inline="true" label-position="right" label-width="110px">
          <!-- <el-form-item label="创建时间">
            <el-date-picker
              v-model="formData.field103"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px; margin-right: 30px"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item> -->
          <!-- <el-form-item label="完成时间">
            <el-date-picker
              v-model="formData.field103"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px; margin-right: 30px"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item> -->

          <el-form-item label="奖励模板名称">
            <el-input
              v-model="formData.field101"
              placeholder="请输入模版名称"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="奖励依据">
            <el-input
              v-model="formData.field102"
              placeholder="请输入奖励依据"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input
              v-model="formData.field103"
              placeholder="请输入用户昵称"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户账号">
            <el-input
              v-model="formData.field104"
              placeholder="请输入用户账号"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select
              v-model="formData.field105"
              filterable
              clearable
              placeholder="请选择状态"
              style="margin-right: 30px; width: 200px"
            >
              <el-option
                v-for="(item, index) in field105Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="" style="margin-left: 110px">
            <el-button
              icon="el-icon-refresh"
              style="background: #eeeeee; color: #6396f4; font-weight: bold"
              @click="resetForm"
              >重置
            </el-button>
            <el-button type="primary" icon="el-icon-search" @click="getList"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- <div style="display: flex; justify-content: center">
          <el-button
            icon="el-icon-refresh"
            style="background: #eeeeee; color: #6396f4; font-weight: bold"
            @click="resetForm"
            >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="submitForm"
            >搜索</el-button
          >
        </div> -->
      </div>

      <el-divider></el-divider>
      <!-- tab-表格 -->
      <div style="margin: 20px 0px">
        <!-- <div class="exportButton">
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="addAwardButton(true)"
            >新增
          </el-button>
        </div> -->
        <el-table :data="roleList" :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }">
          <!-- <el-table-column
            label="开始时间"
            prop="createTime"
            align="center"
            width="150"
          /> -->
          <!-- <el-table-column label="完成时间" prop="nickName" align="center" /> -->
          <el-table-column
            label="奖励模板名称"
            prop="rewardTemplateName"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.rewardTemplateName || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="奖励依据" prop="keyName" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.keyName || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" prop="nickName" align="center">
           <template slot-scope="scope">
              <span>{{ scope.row.nickName || "暂无" }}</span>
            </template>
          </el-table-column>

          <el-table-column label="用户账号" prop="userName" align="center">
           <template slot-scope="scope">
              <span>{{ scope.row.userName || "暂无" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            prop="pattern"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-show="scope.row.pattern == 'PERSONAL'">个人</span>
              <span v-show="scope.row.pattern == 'TEAM'">团队</span>
            </template>
          </el-table-column>

          <el-table-column
            label="当前次数"
            prop="currentNumber"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.currentNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="目标数量"
            prop="targetValue"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="当前数量"
            prop="currentQuantity"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="进度"
            prop="totalQuantity"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>
                <el-progress
                  :percentage="scope.row.bfb"
                  color="rgb(24, 144, 255)"
                ></el-progress>
        
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-show="scope.row.bfb >= 100"
                @click="implementAward(scope.row)"
                type="text"
                size="small"
                >执行奖励
              </el-button>
              <el-button
                @click="getDetailsButton(scope.row)"
                type="text"
                size="small"
                >奖励信息记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        style="margin: 0px 0px 50px 0px"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!--  弹窗-->
    <el-dialog title="奖励信息记录" :visible.sync="getDetails">
      <el-table :data="DetailsDataList" height="450" :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }">
        <!-- <el-table-column
          label="日期"
          prop="createTime"
          align="center"
          width="150"
        /> -->
        <el-table-column
          label="奖励时间"
          prop="createTime"
          align="center"
          width="150"
        />
        <!-- <el-table-column label="目标数量" prop="targetValue" align="center" /> -->
        <el-table-column label="扣除数量" prop="value" align="center" />

        <!-- <el-table-column
          label="新增前数量"
          prop="beforQuantity"
          align="center"
        /> -->
        <!-- <el-table-column label="新增数量" prop="addQuantity" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.addQuantity }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="当前数量" prop="afterQuantity" align="center" /> -->
        <!-- <el-table-column
          label="进度"
          prop="totalQuantity"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>
              <el-progress
                :percentage="scope.row.bfb"
                color="rgb(24, 144, 255)"
              ></el-progress>
            </span>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        style="margin: 0px 0px 50px 0px"
        :total="record.total"
        :page.sync="record.pageNum"
        :limit.sync="record.pageSize"
        @pagination="recordList"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  selectRewardInfos,
  selectRewardInfoRecords,
  executeReward,
} from "@/api/projectManagement/index.js";

export default {
  data() {
    return {
      //查看详情弹窗
      getDetails: false,
      recordDataList: [],
      record: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      //时间选择器的快捷选择
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field104: undefined,
        field106: undefined,
      },

      field105Options: [
         {
          label: "全部",
          value: undefined,
        },
        {
          label: "个人",
          value: "PERSONAL",
        },
        {
          label: "团队",
          value: "TEAM",
        },
      ],

      //
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      // 用户ID
      userId: null,
      DetailsDataList: [],
      // 分页总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 收入类型
        amountType: "",
      },
      roleList: [{ nickName: "3" }],
      //判断是否为用户和租户
      userName: "",
      row: {
        id: "",
        userId: "",
      },
    };
  },
  mounted() {
    this.userName = sessionStorage.getItem("userName");
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    if (this.userId) {
      this.getList();
    }
  },
  methods: {
    //查看详情
    async getDetailsButton(row) {
      //console.log(row, "5555555");
      let param = {
        projectId: this.$route.query.projectId - 0, //项目ID
        rewardInfoId: row.id, //奖励信息ID
        rewardTemplateId: this.$route.query.id - 0, //奖励模板ID
        pageNum: this.record.pageNum,
        pageSize: this.record.pageSize,
        userId: row.userId,
      };
      const data = await selectRewardInfoRecords(param);
      //console.log(data, "信息记录");
      if (data.code == 200) {
        let num = null;
        let num2 = null;
        if (data.data.list.length > 0) {
          data.data.list.forEach((item) => {
            num = item.afterQuantity / item.targetValue; //四舍五入取整
              num2 = num*100; //四舍五入取整
            item.bfb = num2.toFixed(2)-0; //四舍五入取整
          });
          this.DetailsDataList = data.data.list;
          this.record.total = data.data.total;
        } else {
          this.DetailsDataList = [];
        }
      } else {
        this.$message.error(data.msg);
      }

      this.row.id = row.id;
      this.row.userId = row.userId;
      this.getDetails = true;
    },
    async recordList() {
      let param = {
        projectId: this.$route.query.projectId - 0, //项目ID
        rewardInfoId: this.row.id, //奖励信息ID
        rewardTemplateId: this.$route.query.id - 0, //奖励模板ID
        pageNum: this.record.pageNum,
        pageSize: this.record.pageSize,
        userId: this.row.userId,
      };
      const data = await selectRewardInfoRecords(param);
      //console.log(data, "信息记录");
      let num = null;
      let num2 = null;
      if (data.code == 200) {
        if (data.data.list.length > 0) {
          data.data.list.forEach((item) => {
            num = item.afterQuantity / item.targetValue; //四舍五入取整
              num2 = num*100; //四舍五入取整
            item.bfb = num2.toFixed(2)-0; //四舍五入取整
          });

          this.DetailsDataList = data.data.list;
          this.record.total = data.data.total;
        } else {
          this.DetailsDataList = [];
        }
      } else {
        this.$message.error(data.msg);
      }
    },
    async getList(row) {
      let param = {
        // this.formData.field105
        rewardTemplateName: this.formData.field101, //奖励模板名称
        keyName: this.formData.field102, //奖励依据
        nickName: this.formData.field103, //用户昵称
        userName: this.formData.field104, //用户账号
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        // projectId: 0,
        rewardTemplateId: this.$route.query.id - 0, //奖励模板ID
        // userId: this.userId - 0,
      };
      const data = await selectRewardInfos(param);
      //console.log(data, "66777000");
      if (data.code == 200) {
        if (data.data.list.length > 0) {
          let num = null;
          let num2 = null;
          data.data.list.forEach((item) => {
            num = item.totalQuantity / item.targetValue; //四舍五入取整
            num2 = num*100; //四舍五入取整
            item.bfb = num2.toFixed(2)-0; //四舍五入取整
          });
          this.$nextTick(() => {
            this.roleList = data.data.list;
            //console.log(this.roleList, "小数");
            this.total = data.data.total;
          });
        } else {
          this.roleList = [];
        }
      } else {
        this.$message.error(data.msg);
      };
        if(row){
         this.$message({
          message: '搜索中...',
          type: 'success'
        });
      }
    },
    //执行奖励
    async implementAward(row) {
      this.$confirm(`是否进行对${row.rewardTemplateName}执行奖励?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let param = {
            rewardInfoId: row.id,
            workTime: "", //固定写死传空
          };
          const data = await executeReward(param);
          if (data.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
          } else {
            this.$message.error(data.msg);
          }
          //console.log(data, "执行奖励返回信息");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消执行",
          });
        });
    },
    //重置
    resetForm() {
      this.formData = {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field104: undefined,
        field106: undefined,
      };
      this.getList(1);
    },
  },
};
</script>

<style scoped lang="scss">
.myQuillEditor {
  // border:1px red solid;
  height: 400px;
}
.Dbox {
  height: auto;
}
::v-deep .el-card__header {
  border: none;
}
.xhxBox {
  border-top: 1px #eee solid;
  height: 5px;
  margin-top: 0px;
}
.exportButton {
  /* border: 1px red solid; */
  display: flex;
  margin-bottom: 10px;
  justify-content: flex-start;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
